<template>
    <div class="order">
        <!-- 顶部导航栏 -->
        <div class="header">
            <div class="navbar">
                <h3>学习中心</h3>
            </div>
        </div>
        <van-pull-refresh v-model="isLoading">
            <!-- tab栏区域 -->
            <div class="tab">
                <van-tabs v-model="active" @click="getArticle()" title-active-color="# #faaca8" color="#faaca8">
                    <van-tab title="科目一">
                        <div class="addButton"><van-button icon="comment-o" @click="MyArticle" >我的分享</van-button> <van-button icon="plus" @click="addArticle" >我要分享</van-button></div>
                        <div @click="getArticleDetail(article.id)" class="content" v-for="article in articleData" :key="article.id">
                            <!-- 左边图片 -->
                            <div class="content_img">
                                <img :src="bookSrc">
                            </div>
                            <div style="margin-left: 10px;">
                                <p style="color:rgb(238,104,66);font-weight: 700;">{{article.author}}</p>
                                <p >{{article.title}}</p>
                                <p><span>点赞数：</span><span>{{article.count}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img width="25px" @click.stop="addNice(article.id)" :src="niceSrc"></p>
                                <p style="color: #666;">{{article.create_time | fmtDate_global}}</p>
                            </div>
                        </div>
                    </van-tab>
                    <van-tab title="科目二">
                        <div class="addButton"><van-button icon="comment-o"  @click="MyArticle" >我的分享</van-button> <van-button icon="plus" @click="addArticle" >我要分享</van-button></div>
                        <div @click="getArticleDetail(article.id)" class="content" v-for="article in articleData" :key="article.id">
                            <!-- 左边图片 -->
                            <div class="content_img">
                                <img :src="bookSrc">
                            </div>
                            <div style="margin-left: 10px;">
                                <p style="color:rgb(238,104,66);font-weight: 700;">{{article.author}}</p>
                                <p >{{article.title}}</p>
                                <p><span>点赞数：</span><span>{{article.count}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img width="25px" @click.stop="addNice(article.id)" :src="niceSrc"></p>
                                <p style="color: #666;">{{article.create_time | fmtDate_global}}</p>
                            </div>
                        </div>
                    </van-tab>
                    <van-tab title="科目三">
                        <div class="addButton"><van-button icon="comment-o" @click="MyArticle" >我的分享</van-button><van-button icon="plus" @click="addArticle" >我要分享</van-button></div>
                        <div @click="getArticleDetail(article.id)" class="content" v-for="article in articleData" :key="article.id">
                            <!-- 左边图片 -->
                            <div class="content_img">
                                <img :src="bookSrc">
                            </div>
                            <div style="margin-left: 10px;">
                                <p style="color:rgb(238,104,66);font-weight: 700;">{{article.author}}</p>
                                <p >{{article.title}}</p>
                                <p><span>点赞数：</span><span>{{article.count}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img width="25px" @click.stop="addNice(article.id)" :src="niceSrc"></p>
                                <p style="color: #666;">{{article.create_time | fmtDate_global}}</p>
                            </div>
                        </div>
                    </van-tab>
                    <van-tab title="科目四">
                        <div class="addButton"><van-button icon="comment-o" @click="MyArticle" >我的分享</van-button><van-button icon="plus" @click="addArticle" >我要分享</van-button></div>
                        <div @click="getArticleDetail(article.id)" class="content" v-for="article in articleData" :key="article.id">
                            <!-- 左边图片 -->
                            <div class="content_img">
                                <img :src="bookSrc">
                            </div>
                            <div style="margin-left: 10px;">
                                <p style="color:rgb(238,104,66);font-weight: 700;">{{article.author}}</p>
                                <p >{{article.title}}</p>
                                <p><span>点赞数：</span><span>{{article.count}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img width="25px" @click.stop="addNice(article.id)" :src="niceSrc"></p>
                                <p style="color: #666;">{{article.create_time | fmtDate_global}}</p>
                            </div>
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
        </van-pull-refresh>
        <van-popup v-model="show" round position="bottom" :style="{ height: '50%' }">
            <van-form>
                <van-field
                    v-model="title"
                    rows="1"
                    autosize
                    label="标题"
                    type="textarea"
                    maxlength="15"
                    placeholder="请输入标题"
                    show-word-limit
                    />
                <van-field
                    v-model="content"
                    rows="10"
                    label="内容"
                    type="textarea"
                    maxlength="1000"
                    placeholder="请输入文章内容"
                    show-word-limit
                    />
                    <van-field
                    readonly
                    clickable
                    label="科目"
                    :value="categoryShow"
                    placeholder="科目"
                    @click="showPicker = true"
                    />
                    <van-popup v-model="showPicker" round position="bottom">
                    <van-picker
                        show-toolbar
                        :columns="columns"
                        @cancel="showPicker = false"
                        @confirm="onConfirm"
                    />
                    </van-popup>
                <van-button block type="info" size="normal" @click="createArticle">马上分享</van-button>
            </van-form>
        </van-popup>
    </div>
</template>

<script>
    // 引入vuex的辅助函数
    import {
        mapActions,
        mapState
    } from 'vuex'
    import { Toast } from 'vant';
    import Home from "../js/Home";
    import Article from "../js/Article";
    export default {
        data() {
            return {
                showPicker:false,
                categoryShow:"",
                category:"",
                title:"",
                content:"",
                show:false,
                articleData:[],
                active:0,
                bookSrc:require('../../assets/book.jpg'),
                niceSrc:require('../../assets/dianzan.png'),
                status: '',
                customerId: 0,
                isLoading: false,
                columns: ['科目一', '科目二', '科目三', '科目四'],
            };
        },
        computed: {
        
        },
        mounted(){
            this.getArticle(1)
        },
        methods: {
            // 跳转到文章详情界面
            getArticleDetail(id){
                this.$router.push({path:'/manager/detail',query: {id: id}})
            },
            // 点赞
            addNice(id){
                Home.addNice(id).then(res => {
                    if(res.data.code === 0){
                        this.getArticle(this.active+1)
                        Toast.success('点赞成功');
                    }else{
                        Toast.fail('未知错误');
                    }
                })
            },
            // 新增文章按钮操作
            addArticle(){
                 this.show = true;
            },
            // 获取全部文章
            getArticle(){
                let requestBody ={
                    category:this.active+1
                }
                Article.getArticle(requestBody).then(res => {
                    if(res.data.code === 0){
                        this.articleData = res.data.data.list
                    }else{
                        Toast.fail('获取错误');
                    }
                })
            },
            onConfirm(value,index) {
                this.categoryShow = value
                this.category = index+1;
                this.showPicker = false;
            },
            // 分享文章
            createArticle(){
                let requestBody = {
                    title:this.title,
                    content:this.content,
                    category:this.category,
                    coverUrl: "",
                    status: "draft",
                    isRecommend: true
                }
                Article.createArticle(requestBody).then(res => {
                    if (res.data.code === 0) {
                        this.show = false;
                        this.title = ""
                        this.content=""
                        this.category=""
                        this.categoryShow = ""
                        Toast.success('分享成功');
                    }else{
                        Toast.fail('未知错误');
                    }
                })
            },
            // 打开我的分享
            MyArticle(){
                this.$router.push({path:'/manager/myArticle'})
            }
        },
        created() {
           
        },
    };
</script>

<style scoped lang="less">
    .addButton{
        margin-top: 1%;
        text-align: right;
        margin-right: 1%;
    }
    .van-button--default{
        background-image: linear-gradient(135deg, #4CF6FC 0%, #3C7FB2 42%);
        color: white;    
        border-radius: 5px;
    }

    .content_img img {
        position: relative;
        top: 14px;
        width: 120px;
        height: 80px;
    }

    .content {
        display: flex;
        border-bottom: 1px solid #ccc;
        padding: 10px;
        background-color: #fff;

    }
    /* tab栏颜色 */
    

    .navbar {
        background-image: linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%);
        height: 46px;
        text-align: center;
        color: #fff;
    }

    .navbar h3 {
        color: #fff;
        margin-top: 0;
        line-height: 46px;
    }
    .van-popup {
        .van-form{
            .van-button{
                border-radius: 10px;
                margin-top: 5%;
            }
        }
    }
</style>